<template>
  <div>
    <el-container>
      <el-container>
        <!-- 中间部分头部的四个按钮 -->
        <el-footer>
          &nbsp;🚀&nbsp;
          <div style="margin-right: 80px">
            <el-button type="primary" round @click="changeContent('index')"
              >首&nbsp;&nbsp;&nbsp;&nbsp;页</el-button
            >
          </div>
          &nbsp;🚀&nbsp;
          <div style="margin-right: 80px">
            <el-tooltip
              class="item"
              effect="dark"
              content="功能开发中"
              placement="top-start"
            >
              <el-button type="primary" round>公司动态</el-button>
            </el-tooltip>
          </div>
          &nbsp;🚀&nbsp;
          <div style="margin-right: 80px">
             <el-tooltip
              class="item"
              effect="dark"
              content="功能开发中"
              placement="top-start"
            >
            <el-button type="primary" round>大神风采</el-button>
             </el-tooltip>
          </div>
          &nbsp;🚀&nbsp;
          <div style="margin-right: 0px">
             <el-tooltip
              class="item"
              effect="dark"
              content="功能开发中"
              placement="top-start"
            >
            <el-button type="primary" round>关于我们</el-button>
            </el-tooltip>
          </div>
        </el-footer>

        <!-- 内容部分组件 -->
        <Content></Content>

      </el-container>

      <!-- 右侧卡片部分 -->
      <el-aside width="200px">
        <!-- 48小时阅读排行 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="changeContent('new')"
            >
              48小时最新排行&nbsp;&nbsp;&nbsp;&nbsp; >>更多</el-button
            >
          </div>
          <div
            class="text item"
            v-for="(item, index) in fortyeightData"
            :key="item.id"
          >
            <el-link target="_blank" @click="goArticle(item.id)"
              >{{ index + 1 }}.{{ item.articleTitle }}</el-link
            >
            <p></p>
          </div>
        </el-card>

        <!-- 浏览次数最多 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="changeContent('most')"
            >
              10天内浏览次数最多>>更多</el-button
            >
          </div>
          <div
            class="text item"
            v-for="(item, index) in viewdData"
            :key="item.articleId"
          >
            <el-link target="_blank" @click="goArticle(item.articleId)"
              >{{ index + 1 }}.{{ item.articleTitle }}</el-link
            >
            <p></p>
          </div>
        </el-card>

        <!-- 评论最多 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="changeContent('comments')"
            >
              10天内评论最多排行>>更多</el-button
            >
          </div>
          <div
            class="text item"
            v-for="(item, index) in commentData"
            :key="item.articleId"
          >
            <el-link target="_blank" @click="goArticle(item.articleId)"
              >{{ index + 1 }}.{{ item.articleTitle }}</el-link
            >
            <p></p>
          </div>
        </el-card>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import Content from "./content.vue";
import { eventBus } from "../main";
import {
  getfortyeightArticle,
  getMostComments,
  getMountView,
} from "../api/index";
export default {
  name: "Centre",
  components: {
    Content,
  },
  mounted() {
    //获取48小时
    getfortyeightArticle()
      .then(({ data }) => {
        // console.log(data);
        this.fortyeightData = data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    // 10天内评论最多
    getMostComments()
      .then(({ data }) => {
        // console.log(data.data);
        this.commentData = data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    // 10天内查看最多的
    getMountView()
      .then(({ data }) => {
        this.viewdData = data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  data() {
    return {
      input: "",
      // 中间内容数据
      articleData: [],
      //侧栏48小时数据
      fortyeightData: [],
      // 侧栏 10天推荐数据
      viewdData: [],
      // 侧栏 评论最多数据
      commentData: [],
      // changeContent: "",
      dialogVisible: false,
    };
  },
  methods: {
    // 给兄弟传值的方法
    changeContent(string) {
      eventBus.$emit("changContent", string); 
    },
    // 根据文章Id查找文章
    goArticle(articleId) {
      this.$router.push({ path: "/article", query: { articleId } });
    },
  },
};
</script>

<style scoped>
.t {
  /* position: absolute; 绝对定位 */
  margin: -110px 120px 20px 220px;
  width: 400px;
  display: flex;
  font-family: 楷体;
  display: inline-block;
  align-items: center;
  justify-content: center;
}
.el-aside {
  background-color: white;
  /* height: 80vh;  */
}

.el-header {
  background-color: white;
  margin: 0px 1px 15px 0px;
}
.el-main {
  background-color: white;
  min-height: 500px;
  min-height: calc(100vh - 619.5px);
  height: 0;
  flex-grow: 1;
}
.el-footer {
  border: 1px solid black;
  background-color: white;
  display: flex;
  /* 上下对称 */
  align-items: center;
  /* 左右对称 */
  justify-content: center;
}

/* 导航页面 */
.text {
  font-size: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  background-color: rgb(255, 253, 253);
}

.title {
  width: 120px;
  margin-left: 220px;
  margin-top: -185px;
}
</style>

// 消息
<style>
.item1 {
  margin-top: -80px;
  margin-right: 40px;
}
</style>